<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/script.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">

    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
</head>
<body>
    <div class="header"></div>
    <div class="lunbo">
    
            <!-- Slider main container -->
            <div class="swiper-container">
                <!-- Additional required wrapper -->
                <div class="swiper-wrapper">
                    <!-- Slides -->
                    <div class="swiper-slide"><img src="https://img.zcool.cn/community/0148a05fe1712c11013ee04d7c2963.png@1380w" alt=""></div>
                    <div class="swiper-slide"><img src="https://img.zcool.cn/community/01019f5fe3f67411013ee04df9c6c9.jpg@1380w" alt="">
                    </div>
                    <div class="swiper-slide"><img src="https://img.zcool.cn/community/01654c5fe1710411013fdcc7c5aa2a.png@1380w" alt="">
                    </div>
                    <div class="swiper-slide"><img src="https://img.zcool.cn/community/0100fe5fe1713911013fdcc7283da7.png@1380w" alt="">
                    </div>
                    ...
                </div>
                <!-- If we need pagination -->
                <div class="swiper-pagination"></div>
        
                <!-- If we need navigation buttons -->
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
        
                <!-- If we need scrollbar -->
                <!-- <div class="swiper-scrollbar"></div> -->
            </div>
            <script>
                var mySwiper = new Swiper('.swiper-container', {
                    // Optional parameters
                    direction: 'horizontal',
                    loop: true,
                    autoplay: {
                        delay: 1000,
                        reverseDirection: true
                    },
        
                    // If we need pagination
                    pagination: {
                        el: '.swiper-pagination',
                    },
        
                    // Navigation arrows
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                    },
        
                    // And if we need scrollbar
                    // scrollbar: {
                    //     el: '.swiper-scrollbar',
                    // },
                })
            </script>
    </div>
    <div class="banner"></div>
    <div class="footer"></div>
</body>
</html>